<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <span></span>
    <script>
      let hd = `
        <h1>houdunren</h1>
        <h2>dhasjfsbdd</h2>
        `;

      //   console.log(/<(h[1-6])>[\S\s]*<\/h[1-6]>/i.test(hd));//打印不出原子组
      //   console.dir(hd.match(/<h[1-6]>[\S\s]*<\/h[1-6]>/gi));

      // console.dir(hd.match(/<(h[1-6])>([\S\s]*)<\/\1>/i)); //不用g全局匹配
      // console.dir(hd.match(/<(h[1-6])>([\S\s]*)<\/\1>/gi));
      //利用()括起来的原子组 \1代表匹配到第一个原子组就是复制一份 \1代表h[1-6] 在字符串的replace使用$代替\
      //   0: "<h1>houdunren</h1>"  匹配结果
      // 1: "h1"     //第一个原子组
      // 2: "houdunren" //第二个原子组

      // // 案例
      // let mails = "183123456@qq.com";
      // console.log(mails.match(/[\w]+@([\w]+\.)+[\w]+/));

      // let mail = "183123456@sina.com.cn";
      // console.dir(mail.match(/^[\w]+@([\w]+\.)+(com|cn)$/));

      let hds = `
        <h1>houdunren</h1>
        <span>fdsfsdsd</span>
        <h2>dhasjfsbdd</h2>
        `;
      let reg = /<(h[1-6])>([\S\s]+)<\/\1>/gi;
      document.querySelector("span").innerHTML = hds.replace(
        reg,
        (p0, p1, p2) => {
          console.log(p0, p1, p2, "sad");
          return `<span style="color:red">${p2}</span>`;
        }
      );
      //   console.log(hds.replace(reg, `$2`));

      let str = `  
        <h1>houdunren</h1>
        <span>fdsfsdsd</span>
        <h2>dhasjfsbdd</h2>
        `;
        // 给原子组命名?<名称>
      const regx = /<(h[1-6])>(?<con>[\S\s]+)<\/\1>/gi;
      let arr = [];
      while ((res = regx.exec(str))) {
        arr.push(res);
      }
      console.log(arr);

      // str=str.replace(regx,'$2')
      str=str.replace(regx,'$<con>')
      console.log(str);




      
    </script>
  </body>
</html>
